<!DOCTYPE html>
<html>

<head>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <title>lazyload-img</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            text-decoration: none;
            list-style: none;
        }

        .layout {
            margin: 0 auto;
            width: 1000px;
        }

        .lazyload img {
            width: 300px;
            height: 400px;
        }

        .img-ct {
            margin-left: -50px;
            overflow: auto;
        }

        .item {
            float: left;
            margin-left: 50px;
            margin-bottom: 30px;
        }
    </style>
</head>

<body>
    <div class="lazyload">
        <div class="layout">
            <ul class="img-ct">
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="img/dianshiji.jpg" src="img/blank.png"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="img/dianshiji.jpg" src="img/blank.png"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="img/dianshiji.jpg" src="img/blank.png"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="img/dianshiji.jpg" src="img/blank.png"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="img/dianshiji.jpg" src="img/blank.png"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="img/dianshiji.jpg" src="img/blank.png"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="img/dianshiji.jpg" src="img/blank.png"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="img/dianshiji.jpg" src="img/blank.png"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="img/dianshiji.jpg" src="img/blank.png"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="img/dianshiji.jpg" src="img/blank.png"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="img/dianshiji.jpg" src="img/blank.png"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="img/dianshiji.jpg" src="img/blank.png"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="img/dianshiji.jpg" src="img/blank.png"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="img/dianshiji.jpg" src="img/blank.png"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="img/dianshiji.jpg" src="img/blank.png"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="img/dianshiji.jpg" src="img/blank.png"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="img/dianshiji.jpg" src="img/blank.png"></a>
                </li>
                <li class="item">
                    <a href="javascript:void(0)"><img data-img="img/dianshiji.jpg" src="img/blank.png"></a>
                </li>
            </ul>
        </div>

    </div>

    <!--原理：图片地址替换法
    1.0 先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）；
    2.0 当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。
    3.0 这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。-->

    <script type="text/javascript">
        var lazyLoad = (function () {
            var clock;
            // 延迟200ms执行懒加载
            function init() {
                $(window).on("scroll", function () {
                    if (clock) {
                        clearTimeout(clock);
                    }
                    clock = setTimeout(function () {
                        checkShow();
                    }, 200);
                })
                checkShow();
            }
            // 判断当前图片是否已经加载过以及图片是否进入可视区域，
            // 再执行图片路径替换操作
            function checkShow() {
                $(".lazyload img").each(function () {
                    // 当前图片 $cur
                    var $cur = $(this);
                    if ($cur.attr('isLoaded')) {
                        return;
                    }
                    if (shouldShow($cur)) {
                        showImg($cur);
                    }
                })
            }
            // 图片内容是否进入可视区域（或者说滚动条是否拉到底部了）的核心逻辑函数
            function shouldShow($node) {
                // 屏幕卷曲的高度
                var scrollH = $(window).scrollTop(),
                    // 屏幕高度（定值）
                    winH = $(window).height(),
                    // 内容垂直偏移量
                    top = $node.offset().top;
                if (top < winH + scrollH) {
                    // 进入了可视区域
                    return true;
                } else {
                    return false;
                }
            }
            // 执行src替换，添加自定义属性标记isLoaded 
            // 正常开发中，这里是ajax请求图片数据
            function showImg($node) {
                $node.attr('src', $node.attr('data-img'));
                $node.attr('isLoaded', true);
            }
            // 将init暴露
            return {
                init: init
            }
        })()
        lazyLoad.init();
    </script>
</body>

</html>